<template>
  <div>
    <!-- 未登录-背景和头像 -->
    <div v-if="!user" class="bgc">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="背景图">
      <div class="head">
        <div class="headBox">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="游客头像">
        </div>
        <div class="btnBox">
          <div class="userName">游客</div>
          <van-button @click="onLogin" type="primary" size="normal">去登录</van-button>
        </div>
      </div>
    </div>
    <!-- 已登录-背景和头像 -->
    <div v-else class="bgc bgc-my">
      <img class="dl-img" :src="'http://liufusong.top:8080' + userInfo.avatar" alt="背景图">
      <div class="head">
        <div class="headBox">
          <img :src="'http://liufusong.top:8080' + userInfo.avatar" alt="游客头像">
        </div>
        <div class="btnBox">
          <div class="userName">{{userInfo.nickname}}</div>
          <button class="out" @click="onOut">退出</button>
          <div class="edit">编辑个人资料<van-icon name="play" /></div>
        </div>
      </div>
    </div>
    <!-- 宫格区域 -->
    <van-grid :column-num="3">
      <van-grid-item @click="onCollect" text="我的收藏">
        <template #icon>
          <van-icon name="star-o" />
        </template>
      </van-grid-item>
      <van-grid-item @click="onManage" text="我的出租">
        <template #icon>
          <van-icon name="wap-home-o" />
        </template>
      </van-grid-item>
      <van-grid-item text="看房记录">
        <template #icon>
          <van-icon name="underway-o" />
        </template>
      </van-grid-item>
      <van-grid-item text="成为房主">
        <template #icon>
          <van-icon name="credit-pay" />
        </template>
      </van-grid-item>
      <van-grid-item text="个人资料">
        <template #icon>
          <van-icon name="contact" />
        </template>
      </van-grid-item>
      <van-grid-item text="联系我们">
        <template #icon>
          <van-icon name="service-o" />
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 底部区域 -->
    <div class="floor">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { mapState } from 'vuex'
import { getUserSelfInfo } from '@/api/user.js'
export default {
  data () {
    return {
      userInfo: {}
    }
  },

  computed: {
    ...mapState(['user'])
  },

  created () {
    this.loadUserInfo()
  },

  methods: {
    // 点击去登录
    onLogin () {
      this.$router.push({
        path: '/login'
      })
    },
    // 点击退出
    onOut () {
      Dialog.confirm({
        title: '提示',
        message: '是否确定退出？'
      })
        .then(() => {
          this.$store.commit('removeUser')
        })
        .catch(() => {})
    },
    // 加载用户自己的信息
    async loadUserInfo () {
      try {
        const res = await getUserSelfInfo(this.user.token)
        console.log(res)
        this.userInfo = res.data.body
      } catch (err) {
        Toast('获取用户信息失败')
      }
    },
    // 点击跳转收藏页面
    onCollect () {
      this.$router.push({
        path: '/collect'
      })
    },
    // 点击跳转房屋管理页面
    onManage () {
      this.$router.push({
        path: '/manage'
      })
    }
  }
}
</script>

<style scoped lang='less'>
* {
  box-sizing: border-box;
}

// 背景区域
.bgc {
  position: relative;
  width: 750px;
  height: 600px;
  // background-color: hotpink;

  // 背景图
  img {
    width: 750px;
    height: 382px;
  }
  .dl-img {
    width: 750px;
    height: 750px;
  }
  // 头像区域
  .head {
    position: absolute;
    bottom: 0;
    left: 7.5%;
    background-color: #fff;
    width: 85%;
    height: 55%;
    box-shadow: 0 0 20px 6px #ddd;
    // 头像
    .headBox {
      position: absolute;
      top: -70px;
      left: 50%;
      margin-left: -70px;
      border-radius: 50%;
      width: 140px;
      height: 140px;
      // background-color: pink;
      box-shadow: 0 4px 4px #bdbdbd;
      border: 10px solid #f5f5f5;
      img {
        width: 100%;
        height: 100%;
      }
    }

    // 未登录-名字和按钮
    .btnBox {
      position: relative;
      text-align: center;
      // 名字
      .userName {
        position: relative;
        top: 110px;
        font-size: 26px;
      }
      // 按钮
      /deep/.van-button--primary {
        position: relative;
        top: 130px;
        width: 138px;
        height: 60px;
        background-color: #21b97a;
        font-size: 26px;
        border-radius: 10px;
        padding-left: 0;
        padding-right: 0;
        border: 2px solid #108ee9;
      }
      // 已登录
      .out {
        position: relative;
        top: 110px;
        border: 2px solid #108ee9;
        width: 150px;
        border-radius: 60px;
        color: #fff;
        padding: 4px 30px;
        background: #21b97a;
        font-size: 24px;
      }
      .edit {
        position: relative;
        top: 150px;
        font-size: 26px;
      }
    }
  }
}

// 宫格区域
/deep/.van-grid-item__content::after {
  border: none;
}

// 底部区域
.floor {
  text-align: center;
  margin-top: 10px;
  img {
    width: 91%;
  }
}

</style>
